<div id="app" v-cloak>
    <div class="flex-column flex-content-center">
        <div class="padding20">
            <el-scrollbar height="83vh" width="100%">
                <el-form :model="form" ref="form" :rules="rules" label-width="auto" style="width: 700px;margin-top: 20px">
                    <el-form-item label="规则名称" prop="title">
                        <el-input v-model="form.title" placeholder="请填写规则名称" style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="规则" prop="name">
                        <el-input v-model="form.name" placeholder="不允许重复" style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="模块" prop="module">
                        <el-select
                                v-model="form.module"
                                placeholder="选择模块"
                                size="large"
                                style="width: 240px"
                        >
                            <el-option
                                    v-for="item in modules"
                                    :key="item.name"
                                    :label="item.title"
                                    :value="item.name"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="路由" prop="route">
                        <el-input v-model="form.route" placeholder="请填写路由" style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="上级菜单" prop="pid">
                        <el-tree-select
                                v-model="form.pid"
                                placeholder="请选择上级菜单"
                                :data="menus"
                                :render-after-expand="false"
                                show-checkbox
                                check-strictly
                                :props="{
                            label: 'title',
                            value: 'id',
                            children: 'children'
                        }"
                                value-key="id"
                                style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item label="是否为菜单" prop="ismenu">
                        <el-switch
                                v-model="form.ismenu"
                                :active-value="1"
                                :inactive-value="0"
                                class="ml-2"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        />
                    </el-form-item>
                    <el-form-item label="图标" >
                        <el-icon v-if="form.icon" size="25">
                            <component :is="form.icon"/>
                        </el-icon>
                        <el-button size="mini" style="margin-left: 10px" type="success" @click="showIcon" color="#626aef">选择图标</el-button>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-switch
                                v-model="form.status"
                                :active-value="1"
                                :inactive-value="0"
                                class="ml-2"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        />
                    </el-form-item>
                    <el-form-item label="备注" >
                        <el-input type="textarea" v-model="form.remark" :rows="4" placeholder="请填写备注" style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="权重" prop="weigh">
                        <el-input v-model="form.weigh" placeholder="请填写权重" style="width: 240px"/>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>
        <div class="flex-row top10 flex-content-end">
            <div style="width: 95%">
                <el-button type="primary" @click="onSubmit" color="#626aef">保存</el-button>
                <el-button  @click="handleCancel">取消</el-button>
            </div>
        </div>
    </div>
</div>